<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="tabbar">
        <div class="wrapper">
            <ul>
                <li>小米网</li>
                <li>MIUI</li>
                <li>米聊</li>
                <li>游戏</li>
                <li>多看阅读</li>
                <li>云服务</li>
                <li>小米网移动版</li>
                <li>问题反馈</li>
                <li>SelectRegin</li>
            </ul>
        </div>
    </div>

    <!-- logo区 -->
    <div class="logo wrapper">
        <img class="one" src="./images/logo.png" alt="">
        <img src="./images/new.gif" alt="">
        <ul>
            <li>小米手机</li>
            <li>红米</li>
            <li>平板</li>
            <li>电视</li>
            <li>盒子·影音</li>
            <li>路由器</li>
            <li>智能控件</li>
            <li>服务</li>
            <li>社区</li>
        </ul>
    </div>

    <!-- 中部大图 -->
    <div class="xiaomi wrapper">
        <div>
            <ul>
                <li>
                    <div><a href="#" class="classify">手机</a><a href="#">平板</a><a href="#">电话卡</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">电视</a><a href="#">盒子</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">路由器</a><a href="#">智能控件</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">移动电源</a><a href="#">插线板</a>
                    </div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">耳机</a><a href="#">音箱</a>
                    </div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">电池</a><a href="#">存储卡</a>
                    </div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">保护套</a><a href="#">后盖</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">贴膜</a><a href="#">其他配件</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">米兔</a><a href="#">服装</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>

                <li>
                    <div><a href="#" class="classify">箱包</a><a href="#">其他周边</a></div>

                    <span class="iconfont icon-arrow-right-bold"></span>

                </li>


            </ul>
        </div>
        <img src="./images/banner.png" alt="">
    </div>

    <!-- 四个图片 -->
    <div class="four wrapper">
        <div class="empty">我是一个空色块</div>
        <div class="four-img">
            <img src="./images/pro1.png" alt="">
            <img src="./images/pro2.png" alt="">
            <img src="./images/pro3.png" alt="">
        </div>
    </div>

    <!-- 智能硬件 -->
    <div class="aithing">
        <div class="text wrapper">
            <p>智能硬件</p>
            <span>查看全部</span>
        </div>
        <div class="icons wrapper">
            <img class="girl" src="./images/girl.jpg" alt="">
            <div class="right">
                <ul>
                    <li>
                        <img src="./images/d1.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                        <div class="text">免邮费</div>
                    </li>
                    <li>
                        <img src="./images/d2.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                    </li>
                    <li>
                        <img src="./images/d3.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                        <div class="text">免邮费</div>
                    </li>
                    <li>
                        <img src="./images/d4.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                    </li>
                    <li>
                        <img src="./images/d5.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                    </li>
                    <li>
                        <img src="./images/d6.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                    </li>
                    <li>
                        <img src="./images/d7.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                        <div class="text1">享9折</div>
                    </li>
                    <li>
                        <img src="./images/d8.jpg" alt="">
                        <div class="every">
                            <p>小米路由器3</p>
                            <span>四天线设计，更安全更稳定</span>
                            <div>149元</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="final wrapper">
        <ul>
            <p>帮助中心</p>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
        </ul>
        <ul>
            <p>帮助中心</p>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
        </ul>
        <ul>
            <p>帮助中心</p>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
        </ul>
        <ul>
            <p>帮助中心</p>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
        </ul>
        <ul>
            <p>帮助中心</p>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
        </ul>
        <ul>
            <p>帮助中心</p>
            <li>账户管理</li>
            <li>购物指南</li>
            <li>订单操作</li>
        </ul>
        <div class="connnect">
            <p>400-100-5678</p>
            <span>周一至周五 8:00-18:00</span>
            <div>(仅收市话费)</div>
        </div>
    </div>

    <!-- 结尾 -->
     <div class="end">
        <div class="content wrapper">
            <img src="./images/logo.png" alt="">
            <div class="font">
                <span>小米网|MIUI|米聊|多看书城|小米路由器|视频电话|小米后院|小米天猫店|小米淘宝直营店|小米网盟|问题反馈|Select Region</span>
                <p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 </p>
                <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
            </div>
        </div>
        <div class="yesend wrapper">探索黑科技，小米为发烧而生</div>
     </div>

</body>

</html>